/*
 * @Author: lyx 2858535420@qq.com
 * @Date: 2023-02-24 14:47:46
 * @LastEditors: lyx 2858535420@qq.com
 * @LastEditTime: 2023-04-28 14:07:33
 * @FilePath: /bangand-low-code/src/mixins/app-layout-mixin.js
 * @Description: 布局使用的 mixin
 */

import { mapState } from 'vuex';
import defaultSettings from '@/config/defaultSettings';

export const appLatyouMixin = {
  computed: {
    ...mapState({
      // 布局方式
      layoutMode: state => state.app.layout,
      // 主题
      navTheme: state => state.app.theme,
      // 主题配置信息
      themeConfig: state => state.app.themeConfig,
      // 主题色
      primaryColor: state => state.app.color,
      // 弱色
      colorWeak: state => state.app.weak,
      // 是否固定head
      fixedHeader: state => state.app.fixedHeader,
      // 是否固定菜单
      fixedSidebar: state => state.app.fixedSidebar,
      // 内容区域宽度 Fluid Fixed
      contentWidth: state => state.app.contentWidth,
      // 自动隐藏 header
      autoHideHeader: state => state.app.autoHideHeader,

      // 是否是手机模式
      isMobile: state => state.app.isMobile,
      // 是否折叠
      sideCollapsed: state => state.app.sideCollapsed,
      // 是否多页签
      multiTab: state => state.app.multiTab,
      // 重新导入页面
      reloadPage: (state) => state.app.reloadPage,
      // 显示页脚信息
      showFooter: state => state.app.showFooter,
      // 混合模式下 top key
      mixTopMenuKey: state => state.app.mixTopMenuKey,
      // 菜单伸缩位置
      menuTriggerMode: state => state.app.menuTrigger
    }),
    // 显示标题/项目名字
    isShowAppTitle() {
      return defaultSettings.isShowTitle;
    },
    // 菜单宽度
    menuWidth() {
      return defaultSettings.menu.menuWidth;
    },
    // 菜单最小宽度
    menuMinWidth() {
      return defaultSettings.menu.sideMinWidth;
    },
    // 获取真实的宽度
    menuRealWidth() {
      return this.sideCollapsed ? this.menuMinWidth : this.menuWidth;
    },
    // 是否是顶部菜单
    isTopMenu() {
      return this.layoutMode === 'topmenu';
    },
    // 是 mix 模式
    isMixMode() {
      return this.layoutMode === 'mix';
    },
    // 是否是侧边菜单
    isSidemenu() {
      return this.layoutMode == 'sidemenu';
    },
    // 是否显示顶部菜单
    isShowTopMenu() {
      return this.isTopMenu || this.isMixMode;
    },
    // 全屏显示head
    isShowFullHeader() {
      return !this.isSidemenu;
    },

    // 是 head 显示菜单伸缩
    isHeadTrigger() {
      return 'headTop' == this.menuTriggerMode;
    },
    // 菜单底部显示菜单伸缩
    isMenuBottomTrigger() {
      return 'menuBottom' == this.menuTriggerMode;
    },
    // 菜单右侧显示菜单伸缩
    isMenuRightTrigger() {
      return 'menuRight' == this.menuTriggerMode;
    },

    // 是否显示面包屑
    isShowBreadcrumb() {
      return this.$store.state.app.showBreadCrumb && !this.isShowTopMenu;
    }
  },
  methods: {
  }
};
